<template>
	<view class="main flex-col justify-between items-center">
		<!-- #ifdef MP-WEIXIN -->
		<view v-if="canScan" style="border: 1rpx solid #c4c6cb;padding: 1rpx;">
			<template>
				<camera device-position="back" :flash="flash" mode="scanCode" @error="error" class="camera"
					@scancode="scancode"></camera>
			</template>
		</view>
		<!-- #endif -->
		
		<!-- #ifdef APP-PLUS -->
		<view v-if="canScan" id="barcode" style="margin: 0 auto;"></view>
		<!-- #endif -->
		<view class="scan">
			<template v-if="canEnter">
				<view class="input-con">
					<view class="flex-row items-center">
						<input class="input fill" v-model="num" placeholder="请输入终端编号" />
						<view class="btn" @click="onConfirm">确定</view>
					</view>
					<view class="input-text" @click="changeType(1)">切换扫码模式</view>
				</view>
			</template>
		</view>
		<view class="flex-row justify-between" style="width: 60%;">
			<view class="item-icon flex-col items-center justify-center" @click="changeType(0)">
				<image src="/static/img/scan2.png" mode="" class="icon"></image>
				<text class="icon-item">输入终端编号</text>
			</view>
			<view class="item-icon flex-col items-center justify-center" @click="openFlash">
				<image src="/static/img/sacn1.png" mode="" class="icon"></image>
				<text class="icon-item">轻触开灯</text>
			</view>
		</view>
		<!-- <view class="flex-row items-center justify-between" style="width: 80%;">
			<view class="item-icon1" @click="changeType(1)"><image src="/static/img/scan4.png" mode="" class="icon"></image></view>
			<view class="item-icon1" @click="changeType(1)"><image src="/static/img/scan3.png" mode="" class="icon"></image></view>
		</view> -->
	</view>
</template>

<script>
const bass = require('@/common/js/config.js').bassUrl;
export default {
	data() {
		return {
			num: '',
			flash: 'off',
			canScan: true,
			canEnter: false,
			scan: null,
			barcode:null
		};
	},
	mounted() {
		this.$nextTick(()=>{
			// #ifdef APP-PLUS
			this.handle()
			// #endif
		})
	},
	methods: {
		/* 
			电车18位字符,汽车暂定17
		*/
		handle() {
			var pages = getCurrentPages();
			var page = pages[pages.length - 1];
			var currentWebview = page.$getAppWebview(); //页面栈最顶层就是当前webview  
			this.scan = plus.barcode.create('barcode', [plus.barcode.QR], {  
				top:'100px',  
				left:'30px',
				width: '300px',  
				height: '300px',  
				position: 'static'  
			});
			console.log(currentWebview);
			this.scan.onmarked = this.onmarked;
			currentWebview.append(this.scan);
			this.scan.start();
		},
		onmarked(type, result) {
			let t = this
			switch (type) {
				case plus.barcode.QR:
					type = 'QR'
					break
				case plus.barcode.EAN13:
					type = 'EAN13'
					break
				case plus.barcode.EAN8:
					type = 'EAN8'
					break
				default:
					type = '其他' + type
					break
			}
			var result = result.replace(/\n/g, '')
			console.log(result) // 扫出来的值
			var baseUrl = result.split('?')[0]
			if(baseUrl != 'http://localhost'){
				this.scan.start();
				this.$util.msg('请扫描充电站二维码')
				return
			}
			result = result.split('?')[1].split('=')[1].trim();
			this.scan.cancel()
			if(result.length > 17){
				uni.redirectTo({
					url: `/pages/order/bicycle?num=${result}`
				})
			}else{
				uni.redirectTo({
					url: `/pages/order/creat?num=${result}`
				})
			}
		},
		changeType(type) {
			// #ifdef MP-WEIXIN
			type == 0 ? ((this.canScan = false), (this.canEnter = true)) : ((this.canScan = true), (this.canEnter = false));
			// #endif
			// #ifdef APP-PLUS
			if(type == 0){
				this.canScan = false
				this.canEnter = true
				this.scan.close()
				this.scan = null
			}else{
				this.canScan = true
				this.canEnter = false
				if(this.scan != null) this.scan.close()
				setTimeout(()=>{this.handle()},500)
			}
			// #endif
		},
		onConfirm() {
			if (this.num == '') {
				this.$util.msg('请输入设备编号!');
				return;
			}
			if(this.num.trim().length > 17){
				uni.redirectTo({
					url: `/pages/order/bicycle?num=${this.num}`
				})
			}else{
				uni.redirectTo({
					url: `/pages/order/creat?num=${this.num}`
				})
			}
		},
		scancode(res) {
			console.log(res);
			if (res.detail.result) {
				this.canScan = false;
				let result = res.detail.result;
				if (result.indexOf('http://localhost')<0 ){
					this.$util.msg('请扫描充电桩二维码!');
					this.canScan = true;
					return
				}
				if (result.indexOf('?')<0 ){
					this.$util.msg('请扫描充电桩二维码!');
					this.canScan = true;
					return
				}
				
				let num = (decodeURIComponent(result).split('?')[1]).split('=')[1].trim();
				console.log(num)
				if (!num){
					this.$util.msg('请扫描充电桩二维码!');
					this.canScan = true;
					return
				}
				if(num.length > 17){
					uni.redirectTo({
						url: `/pages/order/bicycle?num=${num}`
					})
				}else{
					uni.redirectTo({
						url: `/pages/order/creat?num=${num}`
					})
				}
				// uni.redirectTo({url: `/pages/order/creat?num=${num}`},100);
			}
		},
		error(err) {
			console.log(err);
			this.$util.msg(err.msg);
		},
		openFlash() {
			let flash = this.flash;
			flash == 'on' ? this.flash = 'off' : this.flash = 'on'
		}
	}
};
</script>
<style>
page {
	background: #1d1d1d;
	height: 100%;
}
</style>
<style scoped lang="scss">
.input-con {
	width: 600rpx;
}
.input {
	height: 70rpx;
	padding: 0 20rpx;
	background: #ffffff;
	border-radius: 10rpx 0 0 10rpx;
}
.input-text {
	color: #ffffff;
	padding: 20rpx;
	margin-top: 100rpx;
	text-align: center;
}
.main {
	height: 100%;
	padding: 160rpx 0 100rpx 0;
}
.scan {
	height: 515rpx;
}
.camera {
	width: 518rpx;
	height: 515rpx;
}
.item-icon .icon {
	width: 114rpx;
	height: 114rpx;
}
.item-icon1 {
	background: #363636;
	border-radius: 50%;
	width: 87rpx;
	height: 87rpx;
}
.item-icon1 .icon {
	width: 87rpx;
	height: 87rpx;
	position: fixed;
}
.icon-item {
	font-size: 26rpx;
	font-weight: 500;
	color: #ffffff;
	margin-top: 25rpx;
}
.btn {
	width: 140rpx;
	height: 70rpx;
	line-height: 70rpx;
	text-align: center;
	background: #246697;
	color: #ffffff;
	border-radius: 0 10rpx 10rpx 0;
}
</style>
